<template>
	<view class="main">
		<topCommonTitleBar class="tapBar" :statePerch="true" backgroundColor="#fff" arrow="black" dot-color="#666"
			:show-dot="true" @actionClick="showMore = true"></topCommonTitleBar>
		<view class="content">
			<view class="title">{{ details.title }}</view>
			<view class="viewNum">{{ details.page_view }}阅读</view>
			<u-parse :lazyLoad="true" :content="details.answer_content" class="content_txt"></u-parse>
			<view class="basis">
				<view v-if="details.pursuant_content">
					<view class="basis_title">解答依据：</view>
					<view class="basis_item">
						<rich-text :nodes="details.pursuant_content"></rich-text>
						<!-- <u-parse :content="details.pursuant_content" :lazyLoad="true"></u-parse> -->
					</view>
				</view>
				<view class="source" v-if="sourceList.length > 0">
					<view class="source_item" v-for="(item, index) in sourceList" :key="index" @click="goSource(item)">
						<u--image class="source_icon" width="30rpx" height="30rpx" src="/static/img/wenTiKu/source.png"></u--image>
						<view class="source_txt">{{ item.title }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 更多弹出层 -->
		<view v-show="showMore">
			<u-popup :show="showMore" :round="15" :closeOnClickOverlay="true" :customStyle="{ backgroundColor: 'transparent' }"
				class="showMore" @close="showMore = false">
				<view class="moreList">
					<view class="item" v-for="(item, index) in menuList" :key="index" @click="menuClick(item)">
						<image :src="item.icon" class="icon"></image>
						<view class="title">{{ item.name }}</view>
					</view>
				</view>
				<view class="close" @click="showMore = false">取消</view>
			</u-popup>
		</view>

	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/problemBase/details"></script>

<style lang="scss">
.main {
	background: #FFFFFF;

	.tapBar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.content {
		padding: 155rpx 35rpx 0 35rpx;

		.title {
			font-size: 38rpx;
			font-weight: 700;
			color: #333333;
			line-height: 55rpx;
		}

		.viewNum {
			font-size: 26rpx;
			color: #9E9E9E;
			line-height: 55rpx;
			margin-bottom: 17rpx;
		}

		.content_txt {
			font-size: 26rpx;
			color: #333333;
			line-height: 55rpx;
			letter-spacing: 2rpx;
			white-space: pre-line;
		}

		.basis {
			margin-top: 30rpx;
			padding: 30rpx;
			background: #F7F7F7;
			border-radius: 11rpx;

			.basis_title {
				font-size: 26rpx;
				font-weight: 600;
				color: #3473B3;
				line-height: 55rpx;
			}



			.basis_item {
				margin-top: 27rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 20rpx;
				white-space: pre-wrap;
			}
		}

		.source {
			margin-top: 28rpx;
			padding-top: 20rpx;
			border-top: 2rpx solid #E4E4E4;

			.source_item {
				display: flex;
				align-items: start;
				margin-bottom: 20rpx;

				.source_icon {
					display: inline-block;
				}

				.source_txt {
					font-size: 24rpx;
					color: #3473B3;
					line-height: 36rpx;
				}
			}
		}
	}

	.moreList {
		padding: 34rpx 26rpx;
		box-sizing: border-box;
		width: 700rpx;
		margin: 12rpx auto;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-start;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 162rpx;

			&:last-child {
				margin-top: 30rpx;
			}

			&:nth-last-child(2) {
				margin-top: 30rpx;
			}

			.icon {
				width: 87rpx;
				height: 85rpx;
			}

			.title {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #646566;
			}

			::v-deep img {
				max-width: 100%;
			}
		}

	}

	.close {
		line-height: 94rpx;
		background-color: #FFFFFF;
		width: 700rpx;
		height: 94rpx;
		margin: 12rpx auto;
		margin-bottom: 34rpx;
		border-radius: 16rpx;
		text-align: center;
	}
}
</style>